<template>
<div class="dashboard-container">
    <div class="app-container">
        <el-card>
            <el-tabs v-model="activeName">
                <!-- 角色管理 -->
                <el-tab-pane label="角色管理" name="role">
                    <!-- 新增角色按钮 -->
                    <el-row style="height:60px">
                        <el-button
                            icon="el-icon-plus"
                            size="small"
                            type="primary"
                            @click="handleAdd"
                        >新增角色</el-button>
                    </el-row>
                    <el-table v-loading="isLoading" :data="tableData" style="width: 100%">
                        <el-table-column
                            align="center"
                            prop=""
                            label="序号"
                            width="120"
                        />
                        <el-table-column
                            align="center"
                            prop="name"
                            label="角色名称"
                            width="180"
                        />
                        <el-table-column align="center" prop="description" label="描述" />
                        <el-table-column align="center" prop="" label="操作">
                            <template slot-scope="{row}">
                                <el-button size="small" type="success" @click="handlePermission(row)">分配权限</el-button>
                                <el-button size="small" type="primary" @click="handleUpdate(row)">编辑</el-button>
                                <el-button size="small" type="danger" @click="handleRemove(row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页组件 -->
                    <el-row
                        type="flex"
                        justify="center"
                        align="middle"
                        style="height: 60px"
                    >
                        <!-- 分页组件 -->
                        <el-pagination
                            :current-page="pageParams.page"
                            :page-size="pageParams.pagesize"
                            :total="pageParams.total"
                            layout="prev, pager, next"
                            @current-change="changePage"
                        />
                    </el-row>
                </el-tab-pane>

                <!-- 公司管理-->
                <el-tab-pane label="公司管理" name="company">
                    <el-alert
                        title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
                        type="info"
                        show-icon
                        :closable="false"
                    >
                    </el-alert>
                    <el-form :model="formData" label-width="120px" style="margin-top:50px">
                        <el-form-item label="公司名称">
                            <el-input v-model="formData.name" disabled style="width:600px" />
                        </el-form-item>
                        <el-form-item label="公司地址">
                            <el-input v-model="formData.companyAddress" disabled style="width:600px" />
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="formData.mailbox" disabled style="width:600px" />
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input
                                v-model="formData.remarks"
                                type="textarea"
                                :rows="3"
                                disabled
                                style="width:600px"
                            />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <!-- 编辑弹窗 -->
            <newRole
                ref="newRole"
                :title="roleTitle"
                :show-dialog.sync="isShowDialog"
                @updateRole="getRoleList"
            ></newRole>
            <!-- 编辑弹窗  结束  -->

            <!-- 分配权限弹窗 -->
            <el-dialog title="分配权限" :visible="isShowPerDialog" @close="handleClose">
                <el-tree
                    ref="perTree"
                    :data="permissionList"
                    :props="defaultProps"
                    node-key="id"
                    :default-checked-keys="dataList"
                    show-checkbox
                    :current-change="getChecks"
                    check-strictly
                    default-expand-all
                >
                </el-tree>
                <!-- 分配权限弹窗  结束  -->
                <el-row
                    slot="footer"
                    style="padding-top: 20px;"
                >
                    <el-col>
                        <el-button type="primary" @click="getChecks">确认</el-button>
                        <el-button @click="handleClose">取消</el-button>
                    </el-col>
                </el-row>
            </el-dialog>
        </el-card>
    </div>
</div>
</template>

<script>
import { getRoleList, getCompanyById, removeRoleById, getRoleInfoById, updatePerById } from '@/api/setting.js'
import { getPermissionList } from '@/api/permission.js'
import { mapGetters } from 'vuex'
import newRole from './components/newRole.vue'
import listToTree from '@/utils/ListToTree.js'
export default {
	components: {
		newRole
	},
	data() {
		return {
			/* 当前用户ID */
			userId: '',
			/* 弹窗内渲染的res选中数据 */
			dataList: [],
			/* 弹窗内选中数据 */
			idList: [],
			/* 分配权限弹窗 */
			isShowPerDialog: false,
			/* 权限弹窗的数据 */
			permissionList: [],
			/* 权限弹窗的props */
			defaultProps: {
				label: 'name'
			},
			activeName: 'role',
			pageParams: {
				page: 1,
				pagesize: 10,
				total: 0
			},
			/* 承接数组 */
			tableData: [],
			/* 表单数据 */
			formData: {
				name: '',
				companyAddress: '',
				mailbox: '',
				remarks: ''

			},
			/* 加载层 */
			isLoading: false,
			/* 弹层 */
			isShowDialog: false,
			/* 弹层内标题 */
			roleTitle: ''
		}
	},
	created() {
		this.getRoleList()
		this.getCompanyById(this.userInfo.companyId)
		this.getPermissionList()
	},
	computed: {
		...mapGetters([
			'userInfo'
		])
	},
	methods: {
		/* 获取权限列表 */
		async getPermissionList() {
			const res = await getPermissionList()
			this.permissionList = listToTree(res, '0').filter(item => item.enVisible !== '0')
			// console.log(this.permissionList)
		},
		/* 获取角色列表 */
		async getRoleList() {
			this.isLoading = true
			const { total, rows } = await getRoleList(this.pageParams)
			this.pageParams.total = total
			this.tableData = rows
			this.isLoading = false
			// console.log('tableData', this.tableData)
		},
		/* 获取公司信息 */
		async getCompanyById(id) {
			const res = await getCompanyById(id)
			this.formData = res
		},
		/* 根据ID删除角色 ，e为插槽传进来的参数row*/
		handleRemove(row) {
			this.$confirm('确认删除该角色？', {
				confirmButtonText: '删除',
				cancelButtonClass: 'btn-custom-cancel'
			})
				/* 确认 */
				.then(async() => {
					await removeRoleById(row.id)
					this.$message.success('删除角色成功！')
					this.tableData = this.tableData.filter(item => item.id !== row.id)
				})
		},
		/* 根据ID编辑角色 */
		async handleUpdate(row) {
			this.roleTitle = '编辑角色'
			await this.$refs.newRole.getRoleInfo(row.id)
			this.isShowDialog = true
		},
		/* 新增角色 */
		handleAdd() {
			this.roleTitle = '新增角色'
			this.isShowDialog = true
		},
		async changePage(e) {
			this.pageParams.page = e
			await this.getRoleList()
		},

		/* 分配权限——弹窗内 */
		/* 根据ID分配权限 */
		async handlePermission(row) {
			this.userId = row.id
			const res = await getRoleInfoById(row.id)
			console.log(res)
			this.dataList = res.permIds
			this.isShowPerDialog = true
		},
		/* 取消 */
		handleClose() {
			this.userId = ''
			this.idList = []
			this.$refs.perTree.setCheckedKeys([])
			this.isShowPerDialog = false
		},
		/* 确认 */
		async getChecks() {
			this.idList = this.$refs.perTree.getCheckedKeys()
			const res = await updatePerById({ id: this.userId, permIds: this.idList })
			console.log(res)
			this.handleClose()
			this.$message.success('分配权限完成！')
		}
		/* 分配权限——弹窗内 */
	}
}
</script>

<style lang="scss" scoped>
		.el-dialog{
			.el-col{
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.el-tree{
			::v-deep.el-tree-node{
				.el-tree-node:focus>.el-tree-node__content{
					background-color: red!important;
				}
				&:hover{
					background-color: #f5f7fa;
				}
				border-bottom: 1px solid #eeeeee;
				padding: 10px 0;
			}
		}
</style>
